<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="icon" href="${una}/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/img/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="${una}/css/bootstrap.css" />
    <link rel="stylesheet" href="${una}/css/font-awesome.css" />
    <link rel="stylesheet" href="${una}/css/ionicons.css" />
    <link rel="stylesheet" href="${una}/js/layer/theme/default/layer.css"/>
    <link rel="stylesheet" href="${una}/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="${una}/css/blog-boot.css" />
    <title>频道 - 尤娜(UnaBoot)</title>
    <style>
        .tree-wrapper{
            border-right: 1px dashed #dddddd;
            padding-top: 5px;
        }
        #ztree{
            border: 1px solid #dddddd;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            margin-top: 5px;
        }
        #ztree::-webkit-scrollbar {/*滚动条整体样式*/
            width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        #ztree::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        #ztree::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }
        .layui-layer-btn .layui-layer-btn0{
            border-color: none;
            color:#fff !important;
        }
    </style>
</head>
<body>
<div class="header fixed-top">
    <div class="container">
        <div class="left">
            <a href="${una}/admin/dashboard" class="logo"><img src="${blog_logo!'${una}/img/logo.png'}" class="img-fluid" style="height: 40px"></a>
        </div>
        <div class="middle">
            <div class="inner">
                <a href="${una}/admin/dashboard"><i class="fa fa-dashboard"></i> 主页</a>
                <a href="${una}/admin/posts" ><i class="fa fa-edit"></i> 创作</a>
                <a href="${una}/admin/categories" class="current"><i class="fa fa-th-large"></i> 页面</a>
                <a href="${una}/admin/themes" ><i class="fa fa-gift"></i> 主题</a>
                <a href="${una}/admin/settings/general"><i class="fa fa-sliders"></i> 系统</a>
            </div>
        </div>
        <div class="right">
            <a href="/admin/logout" data-toggle="tooltip" data-placement="bottom" title="退出"><i class="fa fa-sign-out"></i></a>
            <a href="javascript:void(0);" id="profile" data-toggle="tooltip" data-placement="bottom" title="个人设置"><i class="fa fa-cogs"></i></a>
            <a href="${una}/index.html" data-toggle="tooltip" data-placement="bottom" title="博客主页"><i class="fa fa-home"></i></a>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="box box-solid">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-3 tree-wrapper">
                                <button type="button" id="new-category" class="btn btn-sm btn-primary text-center"><i class="fa fa-plus"></i> 新增</button>
                                <ul id="ztree" class="ztree" style="width: 100%;min-height: 750px;max-height: 1100px;overflow: auto;"></ul>
                            </div>
                            <div class="col-9">
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    <strong><i class="fa fa-info-circle"></i></strong> 这里是栏目管理
                                </div>
                                <div class="tip-wrapper">
                                    <p class="text-center">单击左侧栏目显示编辑表单</p>
                                </div>
                                <form id="category-form" style="display:none;">
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">名称：</label>
                                        <input type="hidden" name="id" id="category-id"/>
                                        <input type="text" name="name" class="form-control col-6">
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Slug Name：</label>
                                        <input type="text" name="slug" class="form-control col-6">
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Root：</label>
                                        <input type="text" class="form-control col-6" name="parentName">
                                        <input type="hidden" name="parentId">
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Theme：</label>
                                        <input type="text" name="template" id="template" class="form-control col-6" readonly>
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Sort：</label>
                                        <input type="number" min="0" class="form-control col-6" name="sortNum">
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">导航栏目：</label>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="nav1" name="allowNav" value="1" class="custom-control-input">
                                            <label class="custom-control-label" for="nav1">开启</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="nav2" name="allowNav" value="0" checked class="custom-control-input">
                                            <label class="custom-control-label" for="nav2">关闭</label>
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Keywords：</label>
                                        <textarea class="form-control col-6" name="keywords" rows="3" placeholder="栏目/分类关键词..."></textarea>
                                    </div>
                                    <div class="form-group form-inline">
                                        <label class="col-3 text-right">Description：</label>
                                        <textarea class="form-control col-6" name="description" rows="5" placeholder="栏目/分类描述信息..."></textarea>
                                    </div>
                                    <div class="form-group text-center">
                                        <button type="button" class="btn btn-primary btn-sm align-center update-category"><i class="fa fa-save"></i> 保存</button>
                                        <button type="button" class="btn btn-dark btn-sm align-center remove-category"><i class="fa fa-trash-o"></i> 删除</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">

</div>
</body>

<script type="text/javascript" src="${una}/js/jquery.min.js" ></script>
<script type="text/javascript" src="${una}/js/jquery.serializejson.js"></script>
<script type="text/javascript" src="${una}/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="${una}/js/bootstrap.bundle.js" ></script>
<script type="text/javascript" src="${una}/js/layer/layer.js"></script>
<script type="text/javascript" src="${una}/js/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${una}/js/blog-boot.js"></script>
<script>
    $(function(){
        $('[data-toggle="tooltip"]').tooltip();
        var ztreeObject;
        var settings = {
            async:{
                enable:true,
                autoParam:['id','name','parentId'],
                type:'get',
                url:'${una}/admin/categories/tree'
            },
            callback:{
                onAsyncSuccess:expandAll,
                onClick:onClick,

            },
            data:{
                simpleData:{
                    enabled:true,
                    idKey:'id',
                    pIdKey:'parentId',
                    rootPId:0
                }
            },
        }
        ztreeObject = $.fn.zTree.init($("#ztree"),settings,[]);
        function expandAll(){
            ztreeObject.expandAll(true);
        }
        /**
         * on tree node click function.
         */
        function onClick(event,treeId,treeNode){
            console.log("event:"+event+",treeId:"+treeId+",treeNode:"+treeNode);
            var loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
            $.ajax({
                type:"get",
                url:"${una}/admin/categories/"+treeNode.id,
                cache:false,
                dataType:"json",
                success:function(result){
                    util.fillFormField("#category-form",result);
                    layer.close(loading);
                    $(".tip-wrapper").hide();
                    $("#category-form").show();
                },
                error:function(){
                    layer.alert("加载失败，请稍后再试!");
                    layer.close(loading);
                }
            });
        }

        /**
         * redirect create category page.
         */
        $("#new-category").on("click",function(){
            var parentId = getSelectNode();
            layer.open({
                skin:"",
                type:2,
                title:"<i class='fa fa-plus'> 新增栏目</i>",
                shadeClose:false,
                shade:0.5,
                offset:['100px'],
                area:['45%','75%'],
                content:"${una}/admin/categories/"+parentId+"/new",
                resize:false,
                anim:2,
                end:function(){
                    location.reload();
                }
            });
        });
        /**
         * update category parameters.
         */
        $(".update-category").on("click",function(){
            var categoryId = $("#category-id").val();
            var data = $("#category-form").serializeJSON();
            data = JSON.stringify(data);
            layer.confirm("你确定要修改该栏目的属性吗?",{
                btn:['确定','取消']
            },function(){
                var loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    url:'${una}/admin/categories/'+categoryId,
                    type:'PUT',
                    data:data,
                    contentType:'application/json;charset=UTF-8',
                    success:function(){
                        layer.close(loading);
                        layer.msg("该栏目的属性已经修改成功!",{time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },2000);
                    },
                    error:function(){
                        layer.close(loading);
                        layer.msg("Server Error!");
                    }
                });
            });
        });

        /**
         * remove category from system.
         * layer icon:{0:感叹号，1：绿色√,2：红色×,3:黄色问号,4:灰色锁,5:红色哀伤标签,6:绿色笑脸,16:加载动画,其他：黄色感叹号}
         */
        $(".remove-category").on("click",function(){
            var categoryId = $("#category-id").val();
            layer.confirm("你确定要删除该栏目吗?",{
                btn:['确定','取消'],
                icon:3,
                title:'提示信息'
            },function(){
                var loading = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'delete',
                    url:'${una}/admin/categories/'+categoryId,
                    success:function(){
                        layer.close(loading);
                        layer.alert("该栏目已经从系统移除!",{title:'提示信息',icon:1},function(){
                            window.location.reload();
                        });
                    },
                    error:function(){
                        layer.close(loading);
                        layer.alert("Server Exception.",{title:'提示信息',icon:0});
                    }
                });
            });
        });

        function getSelectNode(){
            var nodes = ztreeObject.getSelectedNodes();
            if(nodes.length >0){
                return nodes[0].id;
            }else{
                return 0;
            }
        }

        $("input[name=template]").on("click",function(){
            layer.open({
                skin:"",
                type:2,
                title:"<i class='fa fa-plus'> 选择模板文件</i>",
                shadeClose:false,
                shade:0.5,
                offset:['100px'],
                area:['400px','500px'],
                content:"${una}/admin/categories/themes",
                resize:false,
                anim:2,
            });
        });
        $("#profile").on("click",function(){
            layer.open({
                type:2,
                title:"<i class='fa fa-users'> 重置管理员密码</i>",
                shadeClose:false,
                shade:0.5,
                area:['400px','350px'],
                offset:['150px'],
                content:"${una}/admin/user/profile",
                resize:false,
                anim:2,
            });
        });
    });
</script>
</html>
